<template>
  <Modal :value.sync="isShow" title="创建用户" width="700px" :footer-hide="true" @on-cancel="changeShow" @on-visible-change="detail">
    <!-- footer-hide 不显示底部 -->
    <Form ref="formValidate" :label-width="150" :model="formData" :rules="rules">
      <FormItem label="企业名称" prop="shortName">
        <Input v-model="formData.shortName" style="width: 420px" placeholder="请输入"></Input>
      </FormItem>
      <FormItem label="所属公司" prop="company"><Input v-model="formData.company" style="width: 420px" placeholder="请输入"></Input> </FormItem>
      <FormItem label="城市地区" prop="province">
        <Select style="width: 200px" v-model="formData.city" @on-change="changeCitys(formData.city)">
          <!-- {{formData.province}} -->
          <Option v-for="item in Showise" :value="item" :key="item">{{ item }}</Option>
        </Select>
        <Select style="width: 200px; margin-left: 20px" v-model="formData.province">
          <Option v-for="item in Showisb" :value="item" :key="item">{{ item }}</Option>
        </Select>
      </FormItem>
      <FormItem label="方向(企业标签)" prop="tags">
        <Input v-model="formData.tags" style="width: 420px" placeholder="请输入"></Input>
      </FormItem>
      <FormItem label="备注" prop="remarks">
        <Input v-model="formData.remarks" style="width: 420px" type="textarea" placeholder="请输入" />
      </FormItem>
    </Form>
    <Row type="flex" justify="center">
      <Button style="margin-right: 5px" @click="btnCancel">取消</Button>
      <Button type="primary" @click="btnOk">确定</Button>
    </Row>
  </Modal>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { add, detail, update } from '@/api/hmmm/companys'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    editorId: {
      type: Number
    }
  },
  data () {
    return {
      Showise: [], // 省
      Showisb: [], // 城市
      formData: {
        isFamous: true,
        shortName: '', // 企业名称
        company: '', // 所属公司
        city: '', // 城市地区
        remarks: '', // 备注
        tags: '', // 方向
        province: '' // 省市
      },
      rules: {
        enterprise: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
        company: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
        province: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
        direction: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
        remark: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }]
      },
      formItem: []
    }
  },
  created () {
    this.Showise = provinces()
  },
  methods: {
    changeCitys (idseaCitys) {
      this.Showisb = citys(idseaCitys)
    },
    async btnOk () {
      if (this.editorId) {
        await update({ ...this.formData, isFamous: true })
        this.$message.success('修改用户成功')
      } else {
        await add(this.formData)
        this.$message.success('新增用户成功')
      }
      this.$emit('changegb')
      this.$emit('update:isShow', false)
    },
    btnCancel () {
      this.$emit('update:isShow', false)
    },
    changeShow () {
      this.$emit('update:isShow', false)
    },
    async detail (params) {
      if (params) {
        // console.log(this.Showise)
        // console.log(this.editorId)
        if (this.editorId) {
          const { data } = await detail({ id: this.editorId })
          // console.log(data)
          this.formData = data
          this.changeCitys(this.formData.city)
          // console.log(this.Showise)
          // console.log(this.formData.city)
          // console.log(this.formData.province)
        }
      }
    }
  }
}
</script>

<style>
</style>
